/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:赵晨宇
 */

import React, {FC, useMemo} from 'react';
import useList, {ListOperate} from "../../hooks/useList";
import loginlogService from "../../pages/sys/loginLog/service";
import {SysLoginLogModel} from "../../pages/sys/loginLog/data";
import {ProColumns} from "@ant-design/pro-table/lib/Table";
import ProTableCrud, {ProTableCrudOperate} from "../ProTableCrud";
import Details from "../../pages/sys/loginLog/components/Details";
import {Tag} from "antd";
import styles from "@/utils/utils.less";
import moment from "moment";
import {DialogOperate} from "@/global";
import useDialog from "@/hooks/useDialog";
import StatusTag from "@/components/StatusTag";

const startDate = moment().subtract(7, 'd');
const endDate = moment();

/** 根据账号查询登录日志空间 */
const LoginLogable: FC<{ account: string }> = props => {
  const detailsOperate = useDialog();
  //List
  const listOperate = useList<SysLoginLogModel>({
    onLoad: (params) => {
      const account = props.account;
      if (!account) return undefined;
      return loginlogService.selectPageList({...params, account});
    },
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate,detailsOperate), []);

  //操作栏
  const tableOperate: ProTableCrudOperate<SysLoginLogModel> = {
    showToolbar: false,
    showOptionColumn: false,
    cols,
    listOperate,
    detailsOperate,
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud
      className={styles.historyLogTable}
      tableLayout={undefined}
      search={{span:12,}}
      pagination={{hideOnSinglePage: true}}
      rowSelection={undefined}
      operate={tableOperate}
      scroll={{x: 600}}
    />
  );
}

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysLoginLogModel>, detailsOperate: DialogOperate): (ProColumns<SysLoginLogModel>[]) {
  return [
    {
      title: '日期',
      dataIndex: 'operateDateTime',
      align: 'center',
      sorter: true,
      width: 170,
      order: 5,
      valueType: 'dateRange',
      initialValue: [startDate, endDate],
      formItemProps: {
        'placeholder': ['开始日期', '结束日期'],
        'disabledDate': (current: any) => {
          //不能选择大于今天的日期
          return current && current > moment();
        },
      },
      render: (text, r) => (<a onClick={() => detailsOperate.show({id:r.id})}>{text}</a>),
    },
    {
      title: '类型',
      dataIndex: 'category',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:80,
      valueEnum: {
        null: {text: '全部类型', status: 'Default'},
        1: {text: '登录'},
        0: {text: '注销', status: 'Error'},
      },
      render: (_, r) => {
        let color  = 'default';
        if (r.category === 1) {
          color = '#5cb85c';
        } else if (r.category === 2) {
          color = '#337ab7';
        }
        return (
          <Tag color={color} key={r.category}>
            {r.category === 1 ? '登录' : '注销'}
          </Tag>
        );
      },
      formItemProps:{
        'placeholder':'全部类型',
        'onSelect': listOperate.handleSearch,
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:80,
      formItemProps:{
        'placeholder':'全部状态',
        'onSelect': listOperate.handleSearch,
      },
      valueEnum: {
        null: {text: '全部状态', status: 'Default'},
        true: {text: '成功'},
        false: {text: '失败', status: 'Error'},
      },
      render: (_, r) => {
        return (
          <StatusTag status={r.status} trueLable="成功" falseLable="失败"/>
        );
      },
    },
    {
      title: '操作信息',
      dataIndex: 'msg',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:120,
      formItemProps:{
        'placeholder':'IP地址',
      },
    },
    {
      title: 'IP地点',
      dataIndex: 'ipLocation',
      hideInSearch: true,
      align: 'center',
      width:120,
    },
  ]
}
export default LoginLogable;


